<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- 基础SEO -->
    <title>CaseWarehouse - 前端样式仓库 | CSS动画案例集合</title>
    <meta name="description" content="CaseWarehouse是一个包含丰富CSS动画和交互效果的前端样式案例展示项目。包含按钮、导航、表单、卡片、加载动画等多种分类的样式案例，为前端开发者提供灵感和参考。" />
    <meta name="keywords" content="CSS动画,前端样式,交互效果,按钮样式,导航菜单,表单设计,卡片设计,加载动画,前端案例,Web开发" />
    <meta name="author" content="CaseWarehouse Team" />
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    
    <!-- 语言和地区 -->
    <meta name="language" content="zh-CN" />
    <meta name="geo.region" content="CN" />
    <meta name="geo.placename" content="China" />
    
    <!-- 主题色 -->
    <meta name="theme-color" content="#ff6b6b" />
    <meta name="msapplication-TileColor" content="#ff6b6b" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico?v=637904" />
    <link rel="manifest" href="manifest.json" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://your-domain.com/" />
    <meta property="og:title" content="CaseWarehouse - 前端样式仓库 | CSS动画案例集合" />
    <meta property="og:description" content="包含丰富CSS动画和交互效果的前端样式案例展示项目。为前端开发者提供灵感和参考。" />
    <meta property="og:image" content="https://your-domain.com/images/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="CaseWarehouse - 前端样式仓库展示" />
    <meta property="og:site_name" content="CaseWarehouse" />
    <meta property="og:locale" content="zh_CN" />
    
    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://your-domain.com/" />
    <meta name="twitter:title" content="CaseWarehouse - 前端样式仓库 | CSS动画案例集合" />
    <meta name="twitter:description" content="包含丰富CSS动画和交互效果的前端样式案例展示项目。为前端开发者提供灵感和参考。" />
    <meta name="twitter:image" content="https://your-domain.com/images/twitter-card.png" />
    <meta name="twitter:image:alt" content="CaseWarehouse - 前端样式仓库展示" />
    <meta name="twitter:creator" content="@your-twitter-handle" />
    <meta name="twitter:site" content="@your-twitter-handle" />
    
    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "CaseWarehouse",
      "alternateName": "前端样式仓库",
      "description": "包含丰富CSS动画和交互效果的前端样式案例展示项目",
      "url": "https://your-domain.com/",
      "applicationCategory": "DeveloperApplication",
      "operatingSystem": "Web Browser",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Organization",
        "name": "CaseWarehouse Team"
      },
      "publisher": {
        "@type": "Organization",
        "name": "CaseWarehouse Team"
      },
      "datePublished": "2024-01-01",
      "dateModified": "2024-01-01",
      "inLanguage": "zh-CN",
      "isAccessibleForFree": true,
      "browserRequirements": "Requires JavaScript. Requires HTML5.",
      "softwareVersion": "1.0.0"
    }
    </script>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="css/style.css" as="style" />
    <link rel="preload" href="js/main.js" as="script" />
    <link rel="preload" href="js/data.js" as="script" />
    
    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
    
    <!-- 样式表 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <button class="theme-toggle" id="themeToggle">
      <i class="ri-sun-line" id="themeIcon"></i>
      <span>切换主题</span>
    </button>
    <div class="container">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <h2>样式分类</h2>
        <ul class="menu">
          <!-- 菜单项将通过JavaScript动态生成 -->
        </ul>
      </div>

      <!-- 右侧展示区域 -->
      <div class="main-content">
        <div class="demos-grid" id="demosGrid">
          <!-- 展示项目将通过JavaScript动态加载 -->
        </div>
      </div>
    </div>
    <script src="js/demo.js"></script>
    <script src="js/data.js"></script>
    <script src="js/performance.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
